<template>
  <div class="mesWorkCalendars">
    <el-calendar v-model="dateValue">
      <template #dateCell="{ data, date }">
        <div class="center-pack">
          <div class="header">
            <p class="date" :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split("-").slice(2).join("-") }}
            </p>
          </div>

          <div v-for="(item, index) in formatSchedule(data)" :key="index">
            <p>
              <i class="item-img"></i>{{ $i18n.t('productOutputCalendar.common') }}{{
                item.prodCount
              }}{{ $i18n.t('productOutputCalendar.product') }}<br />{{ $i18n.t('productOutputCalendar.plannedQuantityIs') }}{{ item.actualQuantity }}
            </p>
            <p :class="item.completeRate < 100 ? 'item-red' : 'item-black'">
              <i
                :class="item.completeRate < 100 ? 'item-img-red' : 'item-img'"
              ></i
              >{{ $i18n.t('productOutputCalendar.completionRate2') }}{{ item.completeRate.toFixed(2) }}
            </p>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import { productOutputList } from "@/api/report/productOutputCalendar";
import dayjs from "dayjs";
export default {
  name: "mesWorkCalendars",
  data() {
    return {
      dateValue: "", //当前日期
      list: [], //日历主数据
    };
  },

  methods: {
    // 主页日历信息
    async getList() {
      let data = {
        workCalendarMonth: dayjs(this.dateValue).format("MM"),
        workCalendarYear: dayjs(this.dateValue).format("YYYY"),
      };
      let res = await productOutputList(data);

      this.list = res.data.result || [];
    },
  },
  created() {
    this.dateValue = new Date(); //初始值
    this.getList();
  },
  mounted() {
    this.$nextTick(() => {
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", () => {
        // 点击前一个月
        //console.log(111);
        this.getList();
      });
      let dayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      dayBtn.addEventListener("click", () => {
        // 点击今天
        //console.log(222);
        this.getList();
      });
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", () => {
        // 点击下一个月
        //console.log(333);
        this.getList();
      });
    });
  },
  updated() {
    //console.log(33, this.dateValue);
    //console.log(22, dayjs(this.dateValue).format("YYYY-MM-DD"));
  },
  computed: {
    //将返回数据里的时间与日历控件里的时间匹配，将数据回显在对应的位置上
    //数据的时间格式： riqi:"2021-06-05" --- yyyy-MM-dd；
    //如果后端返回的时间不是yyyy-MM-dd，要转格式再匹配
    formatSchedule() {
      return (data) => {
        return this.list.filter((ele) => {
          let time = ele.planEndDate;
          return time == data.day;
        });
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.mesWorkCalendars {
  /deep/.el-calendar-day {
    height: 110px;
  }
  /deep/.el-calendar__button-group {
    // display: none;
  }
  .center-pack {
    height: 100%;
    .is-selected {
      color: #1989fa;
    }
    .header {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      .date {
        font-weight: 600;
        font-size: 16px;
      }
      .left {
        // position: relative;
        // left: 0px;
        font-size: 12px;
      }
    }
    .nowrap {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .content {
      font-size: 10px;
    }
  }

  .transfer-pack {
    width: 100%;
  }
  .block {
    display: flex;
  }
  .item-img {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: green;
    display: inline-block;
    margin-right: 5px;
  }
  .item-img-red {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: red;
    display: inline-block;
    margin-right: 5px;
  }
  .item-red {
    color: red;
  }
  .item-black {
    color: black;
  }
  ::v-deep {
    .el-calendar-table:not(.is-range) td.next,
    .el-calendar-table:not(.is-range) td.prev {
      pointer-events: none;
    }
  }
}
</style>
